<template>
    <div>
        <el-card style="margin-top: 5px;">
            <el-table border :data="skuList" ref="tableRef" class="table-main">
                <el-table-column align="center" label="序号" width="80" type="index" />
                <el-table-column align="center" label="名称" prop="skuName" width="140"/>
                <el-table-column align="center" label="描述" prop="skuDesc" width="180" />
                <el-table-column align="center" label="图片" width="230">
                    <template #default="{ row }">
                        <img :src="row.skuDefaultImg" style="width: 200px;" />
                    </template>
                </el-table-column>
                <el-table-column align="center" label="重量" prop="weight" />
                <el-table-column align="center" label="价格" prop="price" />
                <el-table-column fixed="right" align="center" label="操作" width="230">
                    <template #default="{ row }">
                        <el-button :type="row.isSale == 0 ? `success` : `danger`"
                            :icon="row.isSale == 0 ? `top` : `Bottom`" size="small" round label="上架"
                            @click="updateSale(row)" />
                        <el-button type="primary" icon="edit" size="small" round label="编辑" disabled />
                        <el-button type="info" icon="InfoFilled" size="small" round label="详情"
                            @click="showInfo(row.id)" />
                        <el-button type="danger" icon="delete" size="small" round label="删除"
                            @click="deleteSkuInfo(row.id)" />
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]" layout="prev, pager, next, jumper, ->, sizes, total" :total="total"
                @change="fetchData" />
        </el-card>
        <el-drawer v-model="drawer" title="查看商品详情" size="40%">
            <el-descriptions :column="1">
                <el-descriptions-item label="名称:">{{ skuInfo.skuName }}</el-descriptions-item>
                <el-descriptions-item label="描述:">{{ skuInfo.skuDesc }}</el-descriptions-item>
                <el-descriptions-item label="价格:">{{ skuInfo.price }}</el-descriptions-item>
                <el-descriptions-item label="平台属性:">
                    <el-tag v-for="item in skuInfo.skuAttrValueList" size="small" style="margin-left: 5px;">
                        {{ item.valueName }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="销售属性:">
                    <el-tag v-for="item in skuInfo.skuSaleAttrValueList" size="small" style="margin-left: 5px;">
                        {{ item.saleAttrValueName }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="商品图片">
                    <el-carousel :interval="2000" type="card" height="300px">
                        <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                            <img :src="item.imgUrl" style="width: 100% ; height: 100%;" />" />
                        </el-carousel-item>
                    </el-carousel>
                </el-descriptions-item>
            </el-descriptions>
        </el-drawer>
    </div>
</template>

<script setup lang='ts' name="SKU">
import type { SkuType } from '@/api/product/spu/type'
import { getSkuList, cancelSale, onSale, getSkuById, deleteSku } from '@/api/product/sku'
import type { ResponseData } from '@/api/type';
import { ElMessageBox, type ElTable } from 'element-plus';

let currentPage = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)
const tableRef = ref<InstanceType<typeof ElTable> | null>(null);
const drawer = ref(false)
let skuInfo = reactive<SkuType>({
    category3Id: undefined,
    isSale: undefined,
    price: undefined,
    spuId: undefined,
    tmId: undefined,
    skuDefaultImg: '',
    weight: '',
    skuDesc: '',
    skuName: '',
    skuAttrValueList: [],
    skuImageList: [],
    skuSaleAttrValueList: []
})

let skuList = reactive<SkuType[]>([])

const fetchData = async () => {
    getSkuList(currentPage.value, pageSize.value).then((res) => {
        Object.assign(skuList, res.data.records)
        total.value = res.data.total
    }).catch((error: ResponseData<String>) => {
        ElMessage.error(`获取SKU列表失败 ${error.message}`)
    });
}

const updateSale = (row: SkuType) => {
    if (row.isSale == 0) {
        onSale(row.id as number).then(() => {
            ElMessage.success('上架成功')
            fetchData()
        }).catch((error: ResponseData<String>) => {
            ElMessage.error(`上架失败 ${error.message}`)
        });
    } else {
        cancelSale(row.id as number).then(() => {
            ElMessage.success('下架成功')
            fetchData()
        }).catch((error: ResponseData<String>) => {
            ElMessage.error(`下架成功 ${error.message}`)
        });
    }
}

const showInfo = (skuId: number) => {
    drawer.value = true
    getSkuById(skuId).then((res) => {
        Object.assign(skuInfo, res.data)
    }).catch((error: ResponseData<String>) => {
        ElMessage.error(`获取SKU详情失败 ${error.message}`)
    })
}

const deleteSkuInfo = (skuId: number) => {
    ElMessageBox.confirm('确认删除该SKU?').then(() => {
        deleteSku(skuId).then(() => {
            ElMessage.success('删除成功')
            fetchData()
        }).catch((error: ResponseData<String>) => {
            ElMessage.error(`删除失败 ${error.message}`)
        })
    }).catch(() => {
        console.log('取消删除')
    })
}

onMounted(() => {
    fetchData()
})  
</script>

<style scoped lang="scss">
.table-main {
    height: calc(100vh - $base-tabbar-height - 145px);
    margin: 10px 0px;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

:deep(.el-carousel__button) {
    width: 10px;
}

</style>